import 'package:flutter/material.dart';

class ClipPathPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  ClipPathPage({Key key, this.arguments}) : super(key: key);

  @override
  _ClipPathPageState createState() => _ClipPathPageState();
}

class _ClipPathPageState extends State<ClipPathPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ClipPathPage'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('贝塞尔曲线'),
            subtitle: ClipPath(
              clipper: MyBezierClipper(),
              child: Container(
                height: 150.0,
                width: double.infinity,
                color: Colors.green,
              ),
            ),
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('波浪'),
            subtitle: ClipPath(
              clipper: MyWave(),
              child: Container(
                height: 150.0,
                width: double.infinity,
                color: Colors.deepPurpleAccent,
              ),
            ),
          ),
          Divider(height: 1.0),
        ],
      ),
    );
  }
}

class MyBezierClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    final offset = 50.0;

    path.lineTo(0.0, 0.0);
    path.lineTo(0.0, size.height - offset);

    final firstControlPoint = Offset(size.width / 2.0, size.height + offset); // 取漂出 size.height 位置 offset 处.
    final firstEndPoint = Offset(size.width, size.height - offset);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);

    path.lineTo(size.width, size.height - offset);
    path.lineTo(size.width, 0.0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

class MyWave extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    final offset = 25.0;

    path.lineTo(0.0, 0.0);
    path.lineTo(0.0, size.height - offset);

    final firstControlPoint = Offset(size.width / 2.0 / 2.0, size.height + offset);
    final firstEndPoint = Offset(size.width / 2.0, size.height - offset);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);

    final secondControlPoint = Offset(size.width / 4.0 * 3.0, size.height - 3.0 * offset);
    final secondEndPoint = Offset(size.width, size.height - offset);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);

    path.lineTo(size.width, size.height - offset);
    path.lineTo(size.width, 0.0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}
